<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <!-- app -->
    <script src="/scripts/HzyAdminUI.js"></script>
    <title>HzyAdminUI</title>
</head>

<body>

    <div id="app" v-cloak class="p-15">
        <div id="login">
            <div class="login-modal"></div>
            <div class="login-container">
                <el-card>
                    <div class="login-title">HzyAdminUI</div>
                    <div class="p-20">
                        <div class="login-input">
                            <div class="form-title">用户名</div>
                            <input type="text" v-model="userName" />
                        </div>
                        <div class="login-input">
                            <div class="form-title">密码</div>
                            <input type="password" v-model="userPassword" />
                        </div>
                        <div class="login-btn">
                            <el-button type="primary" @click="check">登录</el-button>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
    </div>

    <!-- 页面逻辑处理 -->
    <script type="text/javascript">
        let vueApp = Vue.createApp({
            setup() {
                var state = Vue.reactive({
                    userName: 'admin',
                    userPassword: '123'
                });

                //逻辑函数
                var methods = {
                    check() {
                        tools.confirm('登录成功是否登录首页?', () => {
                            window.location = "/views/main.html";
                        }, () => {
                            tools.message("取消了跳转首页!", '警告');
                        })
                    }
                };

                Vue.onMounted(() => {
                    
                });

                return {
                    ...Vue.toRefs(state),
                    ...methods
                }
            }
        });
        HzyAdminUI.initVueApp('#app', vueApp);
    </script>

</body>

</html>